<template>
    <view class="container">
        <u-steps class="u-p-t-20" :list="numList" mode="number" :current="0" active-color="#ff5000"></u-steps>
        <view class="item-container">
            <view class="title">入驻协议</view>
            <view class="content-box">
                <u-parse :html="agreement"></u-parse>
            </view>
            <view class="agreed">
                <u-checkbox v-model="agreed" active-color="#ff5000">我已阅读并同意以上协议</u-checkbox>
            </view>
            <view class="next-btns u-p-t-40">
                <u-button size="mini" @click="handleNextStep">下一步</u-button>
            </view>
        </view>
    </view>
</template>

<script>
    import * as API_Shop from '@/api/shop'
    import * as API_Article from '@/api/article'
    export default {
        data() {
            return {
                numList: [{
                    name: '入驻协议'
                }, {
                    name: '基本信息'
                }, {
                    name: '认证信息'
                }, {
                    name: '资质信息'
                }, {
                    name: '店铺信息'
                }],
                agreed: false,
                agreement: ''
            };
        },
        onLoad() {
            this.getArticleByPosition()
        },
        methods: {
            // 获取入驻协议
            getArticleByPosition() {
                API_Article.getArticleByPosition('COOPERATION_AGREEMENT').then(response => {
                    this.agreement = response.content
                })
            },
            // 下一步
            handleNextStep() {
                if (this.agreed) {
                    API_Shop.initApplyShop().then(response => {
                        this.$u.route('/pages/shop/apply/basic-info');
                    })
                } else {
                    this.$u.toast('请阅读并同意店铺入驻协议！')
                }
            }
        }
    }
</script>

<style lang="scss">
    .container {
        background-color: #FFFFFF;
        height: 100%;

        .item-container {
            border-top: 1px dashed #E1E1E1;
            margin: 20rpx 0;
            text-align: center;
            .title {
                margin: 20rpx 0;
                font-size: 40rpx;
                font-weight: 600;
            }

            .content-box {
                border: 2rpx solid #d7d7d7;
                padding: 20rpx;
                margin: 20rpx;
                max-height: 750rpx;
                overflow-y: scroll;
            }

            /deep/ .u-checkbox__label {
                color: #ff5000;
            }
        }
    }
</style>
